<template>
    <div class="container">
        <header>期刊列表</header>
        <el-form :model="queryForm"
                 label-width="80px"
                 class="demo-ruleForm"
                 :inline="true">
            <el-form-item label="期刊名称:">
                <el-select v-model="queryForm.activityId"
                           clearable
                           @change="querySelectChange"
                           placeholder="请选择期刊">
                    <el-option v-for="item in activityArr"
                               :label="item.title"
                               :value="item.id"
                               :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           @click="search">查询
                </el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table :data="tableData"
                      border
                      align="center"
                      :row-style="{height:'150px'}"
                      header-align="center"
                      width="100%"
                      style="text-align: center;"
                      tooltip-effect="dark">
                <el-table-column type="index"
                                 width="50">
                </el-table-column>
                <el-table-column prop="id"
                                 label="id"
                                 width="50">
                </el-table-column>
                <el-table-column label="前台链接"
                                 width="200">
                    <template slot-scope="scope">
                        <a class="activityLink"
                           :href="scope.row.foregroundLink"
                           target="_blank">
                            {{scope.row.foregroundLink}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="title"
                                 label="标题"
                                 width="200">
                </el-table-column>
                <el-table-column prop="createTime"
                                 label="创建时间"
                                 :formatter="timeFormat"
                                 width="200">
                </el-table-column>
                <el-table-column width="350"
                                 fixed="right"
                                 label="操作">
                    <template slot-scope="scope">
                        <el-button class="pan-btn red-btn"
                                   @click="deleteHandle(scope.row, scope.$index)">删除
                        </el-button>
                        <!--<el-button class="pan-btn green-btn" @click="showDetail(scope.row)">详情</el-button>-->
                        <el-button class="pan-btn green-btn"
                                   @click="editHandle(scope.row, scope.$index)">编辑
                        </el-button>
                        <el-button class="pan-btn green-btn"
                                   @click="addOrDownHandle(scope.row, scope.$index)">{{ !scope.row.releaseFlag ? '上架' :
                            '下架' }}
                        </el-button>
                        <el-button class="pan-btn green-btn"
                                   v-if="scope.row.status == 0"
                                   @click="sendHandle(scope.row, scope.$index)">发布
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :visible.sync="modifyQuestionnaire">
            <div>111</div>
        </el-dialog>
        <div class="footer">
            <el-pagination :total=total
                           :page-size="10"
                           :current-page.sync="currentPageNum"
                           layout="prev, pager, next, jumper"
                           @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import request from '@/utils/request'
    import {parseTime} from '@/utils/index'

    export default {
        name: 'PeriodicalMessage',
        data() {
            return {
                queryForm: {
                    activityId: '',
                    title: ''
                },
                activityArr: [],
                tableData: [],
                searchForm: {
                    pageSize: 10,
                    pageNum: 0
                },
                total: 0,
                currentPageNum: 1,
                modifyQuestionnaire: false
            }
        },
        watch: {
            'searchForm.begin': {
                handler() {
                    this.currentPageNum = this.searchForm.begin + 1;
                },
                deep: true,
                immediate: false
            }
        },
        mounted() {
            this.dataViewone()
            this.dataView()
        },
        methods: {
            querySelectChange() {
                this.searchForm.pageNum = 0;
            },
            // 接受数据
            dataViewone() {
                const _this = this
                _this.axios({
                    url: '/activityConsole/periodicalMessage/getPeriodicalTitle'
                }).then(res => {
                    _this.activityArr = res.data.data
                    console.log(_this.activityArr)
                }).catch(err => {
                    console.log(err)
                })
            },
            // 接受数据
            dataView() {
                const that = this
                that.axios.get('/activityConsole/periodicalMessage/getMessage', {
                    params: {
                        activityId: that.queryForm.activityId,
                        //   beginTime: that.beginTime,
                        //   endTime: that.endTime,
                        pageNum: that.searchForm.pageNum,
                        pageSize: that.searchForm.pageSize
                    }
                }).then(function (res) {
                    console.log(res)
                    if (res.data.status === '200') {
                        that.tableData = res.data.data
                        that.total = parseInt(res.data.description)
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            handleCurrentChange(val) {
                this.searchForm.pageNum = parseInt(val) - 1
                this.dataView(this.searchForm.pageNum)
            },
            // 时间格式化
            timeFormat(row, column) {
                const date = row[column.property]
                return parseTime(date)
            },
            // 删除
            deleteHandle(row, index) {
                const _this = this
                this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'green-btn pan-btn',
                    type: 'warning'
                }).then(() => {
                    request({
                        url: '/activityConsole/periodicalMessage/delPeriodical/' + row.id,
                        method: 'delete'
                    }).then(res => {
                        console.log(111)
                        console.log(res)
                        if (res.status === 'SUCCESS') {
                            console.log(111)
                            _this.$message({
                                type: 'success',
                                message: '删除成功'
                            })
                            _this.tableData.splice(index, 1)
                        } else {
                            console.log(222)
                            _this.$message({
                                type: 'error',
                                message: '删除失败'
                            })
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 编辑
            editHandle(row, index) {
                console.log(row, index)
                this.$router.push({path: '/template-edit/PeriodicalEdit?activityId=' + row.id + '&editFlag=true'})
            },
            // 发布
            sendHandle(row, index) {
                console.log(row)
                const _this = this
                request({
                    url: '/activityConsole/periodicalMessage/id/' + row.id,
                    method: 'post'
                }).then(res => {
                    console.log(res)
                    if (res.status === 200) {
                        _this.tableData[index].status = 1
                        _this.tableData[index].foregroundLink = res.data
                    }
                    _this.$message({
                        type: 'success',
                        message: res.description
                    })
                }).catch(err => {
                    console.log(err)
                })
            },
            // 上架下架
            addOrDownHandle(row, index) {
                console.log(row)
                const _this = this
                request({
                    url: '/activityConsole/periodicalMessage/id/' + row.id + '/run-or-pause',
                    method: 'post',
                    params: {
                        flag: !row.releaseFlag
                    }
                }).then(res => {
                    console.log(res)
                    if (res.status === '200') {
                        row.releaseFlag = !row.releaseFlag
                        _this.$message({
                            type: 'success',
                            message: res.description
                        })
                    } else {
                        _this.$message({
                            type: 'error',
                            message: res.description
                        })
                    }
                })
            },
            search() {
                this.dataView();
            }
        }
    }
</script>
<style scoped>
    .table {
        width: 90%;
        margin: 0 auto 20px;
    }

    header {
        margin-bottom: 10px;
    }

    .footer {
        text-align: center;
    }

    .el-table td {
        padding: 0;
    }

    .activityLink {
        cursor: pointer;
        color: #409eff;
    }

    a.activityLink:hover {
        text-decoration: underline !important;
    }
</style>
